<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <title>前端多终端自适应网页开发模式 - 八月半的研发杂谈</title><meta name="Description" content="MidAug blog java docker hugo"><meta property="og:url" content="https://100180.xyz/posts/2023010401/">
  <meta property="og:site_name" content="八月半的研发杂谈">
  <meta property="og:title" content="前端多终端自适应网页开发模式">
  <meta property="og:description" content="前端多终端自适应网页开发模式 智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还">
  <meta property="og:locale" content="en">
  <meta property="og:type" content="article">
  <meta property="article:section" content="posts">
    <meta property="article:published_time" content="2023-01-04T21:11:33+00:00">
    <meta property="article:modified_time" content="2023-01-04T21:11:33+00:00">
    <meta property="article:tag" content="Css">
    <meta property="og:image" content="https://100180.xyz/images/whoami/avatar.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://100180.xyz/images/whoami/avatar.jpg"><meta name="twitter:title" content="前端多终端自适应网页开发模式">
<meta name="twitter:description" content="前端多终端自适应网页开发模式 智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还">
<meta name="application-name" content="MidAug&#39;s  Blog">
<meta name="apple-mobile-web-app-title" content="MidAug&#39;s  Blog"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://100180.xyz/posts/2023010401/" /><link rel="prev" href="https://100180.xyz/posts/2022083002/" /><link rel="stylesheet" href="/css/style.min.css"><link rel="preload" href="/lib/fontawesome-free/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"></noscript><link rel="preload" href="/lib/animate/animate.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="/lib/animate/animate.min.css"></noscript><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "前端多终端自适应网页开发模式",
        "inLanguage": "en",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/100180.xyz\/posts\/2023010401\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/100180.xyz\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "css","wordcount":  1824 ,
        "url": "https:\/\/100180.xyz\/posts\/2023010401\/","datePublished": "2023-01-04T21:11:33+00:00","dateModified": "2023-01-04T21:11:33+00:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "MidAug","logo": "https:\/\/100180.xyz\/images\/whoami\/avatar.jpg"},"author": {
                "@type": "Person",
                "name": "MidAug"
            },"description": ""
    }
    </script></head>
    <body data-header-desktop="fixed" data-header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="八月半的研发杂谈"><img
        class="lazyload logo"
        src="/svg/loading.min.svg"
        data-src="/favicon/apple-icon-60x60.png"
        data-srcset="/favicon/apple-icon-60x60.png, /favicon/apple-icon-60x60.png 1.5x, /favicon/apple-icon-60x60.png 2x"
        data-sizes="auto"
        alt="/favicon/apple-icon-60x60.png"
        title="/favicon/apple-icon-60x60.png" /><span id="id-1" class="typeit"></span></a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> Posts </a><a class="menu-item" href="/tags/"> Tags </a><a class="menu-item" href="/categories/"> Categories </a><a class="menu-item" href="/about/"> About </a><a class="menu-item" href="/disclaimer/"> Disclaimer </a><a class="menu-item" href="https://github.com/midaug" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw' aria-hidden='true'></i>  </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="Search">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="Clear">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                    <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
                </a></div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="八月半的研发杂谈"><img
        class="lazyload logo"
        src="/svg/loading.min.svg"
        data-src="/favicon/apple-icon-60x60.png"
        data-srcset="/favicon/apple-icon-60x60.png, /favicon/apple-icon-60x60.png 1.5x, /favicon/apple-icon-60x60.png 2x"
        data-sizes="auto"
        alt="/favicon/apple-icon-60x60.png"
        title="/favicon/apple-icon-60x60.png" /><span id="id-2" class="typeit"></span></a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="Search">
                            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="Clear">
                            <i class="fas fa-times-circle fa-fw" aria-hidden="true"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin" aria-hidden="true"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        Cancel
                    </a>
                </div><a class="menu-item" href="/posts/" title="">Posts</a><a class="menu-item" href="/tags/" title="">Tags</a><a class="menu-item" href="/categories/" title="">Categories</a><a class="menu-item" href="/about/" title="">About</a><a class="menu-item" href="/disclaimer/" title="">Disclaimer</a><a class="menu-item" href="https://github.com/midaug" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw' aria-hidden='true'></i></a><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a></div>
    </div>
</header><div class="search-dropdown desktop">
        <div id="search-dropdown-desktop"></div>
    </div>
    <div class="search-dropdown mobile">
        <div id="search-dropdown-mobile"></div>
    </div><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animate__animated animate__flipInX">前端多终端自适应网页开发模式</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel="author" class="author"><i class="fas fa-user-circle fa-fw" aria-hidden="true"></i>MidAug</a></span>&nbsp;<span class="post-category">included in <a href="/categories/css/"><i class="far fa-folder fa-fw" aria-hidden="true"></i>Css</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw" aria-hidden="true"></i>&nbsp;<time datetime="2023-01-04">2023-01-04</time>&nbsp;<i class="fas fa-pencil-alt fa-fw" aria-hidden="true"></i>&nbsp;1824 words&nbsp;
                <i class="far fa-clock fa-fw" aria-hidden="true"></i>&nbsp;4 minutes&nbsp;</div>
        </div><div class="details toc" id="toc-static"  data-kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right" aria-hidden="true"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#前端多终端自适应网页开发模式">前端多终端自适应网页开发模式</a></li>
    <li><a href="#关于自适应网页">关于自适应网页</a></li>
    <li><a href="#自适应三要素">自适应三要素</a></li>
    <li><a href="#自适应开发方式">自适应开发方式</a></li>
    <li><a href="#传统css覆写">传统CSS覆写</a></li>
    <li><a href="#关于css覆写">关于CSS覆写</a></li>
    <li><a href="#完整css覆写">完整CSS覆写</a></li>
    <li><a href="#结尾小结">结尾小结</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h2 id="前端多终端自适应网页开发模式">前端多终端自适应网页开发模式</h2>
<p>智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还是开发本身并不复杂，但是掌握更好的开发模式会使得你编写页面更加高效快捷</p>
<h2 id="关于自适应网页">关于自适应网页</h2>
<p>所谓自适应网页，通过屏幕的宽度实现加载对应的CSS样式表，提高移动终端的访问体验。 <br>
自适应网页主要用于解决，PC网页在移动端显示出现字体过小、模块错位、浮动遮挡等不良体验。 <br>
实际上网页无论是否进行了自适应，通过手机/平板等移动终端都是可以访问的。<br>
但是对网页做移动端自适应适配，在如今是非常有必要的。</p>
<h2 id="自适应三要素">自适应三要素</h2>
<p>自适应网页开发简单归纳为以下三大要素：</p>
<ol>
<li><strong>选定关键屏幕宽度判断</strong><br>
当你要开始进行自适应网页开发的时候，你需要在内心中有大致的布局，明确需要开发几套自适应的配套模板。<br>
然后通过指定min-width and max-width（选定关键屏幕判断）进行CSS覆写。</li>
<li><strong>宽高尽量使用百分比</strong>
自适应网页更多的时候是为了给移动终端带来更好的访问体验，但是移动终端的种类繁多，特别是屏幕尺寸应有尽有。<br>
你不可能对所有的宽度都开发模板，那样工作量太大而且没有意义。<br>
因此如果对元素的各项px属性均指定为百分比，就可以一套自适应模板适配于各类尺寸的屏幕中。</li>
<li><strong>遵循代码聚合的原则</strong><br>
开发自适应网页需要覆写大量的CSS，在开发过程中尽量规划某一个区域专门进行代码编写。 <br>
否则将有可能出现大量冗余样式（特别是大量冗余的屏幕尺寸判断语句）以及样式冲突，对于后期调试极为不利。</li>
</ol>
<h2 id="自适应开发方式">自适应开发方式</h2>
<p>实际上自适应开发是一件非常简单的事情。  <br>
其麻烦并不在于技术，而是对整个网页的CSS样式进行重新编写，这是一个比较浩大的工作。 <br>
那么如何进行自适应开发呢？ <br>
首先网页的head区域要标注一个这样的viewport元标签。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;zh_CN&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- 网页的宽度自动适应手机屏幕的宽度 --&gt;</span> 
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- width=device-width ：表示宽度是设备屏幕的宽度 --&gt;</span> 
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100% --&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- minimum-scale=1.0：表示最小的缩放比例 --&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- maximum-scale=1.0：表示最大的缩放比例 --&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- user-scalable=no：表示用户不可以调整缩放比例 --&gt;</span> 
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> 
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="传统css覆写">传统CSS覆写</h2>
<p>在原来的CSS文件中增加覆写，举例说明。 <br>
案例已经完全包括了自适应开发中应用到的所有方法，比较简单。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/*原始的网页样式*/</span> 
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">container</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">width</span><span class="p">:</span> <span class="mi">1200</span><span class="kt">px</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="k">margin-right</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="k">margin-left</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="k">padding-left</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="k">padding-right</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="c">/*当屏幕宽度小于等于991px时，一般多为手机*/</span> 
</span></span><span class="line"><span class="cl"><span class="c">/*className为container的元素宽度为100%*/</span>
</span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">991px</span><span class="o">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="p">.</span><span class="nc">container</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span> 
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="c">/*当屏幕宽度大于等于992px且小于等于1099px时，一般多为平板*/</span>
</span></span><span class="line"><span class="cl"><span class="c">/*className为container的元素宽度为90%*/</span>
</span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">992px</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">1099px</span><span class="o">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="p">.</span><span class="nc">container</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="k">width</span><span class="p">:</span> <span class="mi">90</span><span class="kt">%</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span> 
</span></span><span class="line"><span class="cl"><span class="c">/*当屏幕宽度大于等于1100px时，常规电脑*/</span>
</span></span><span class="line"><span class="cl"><span class="c">/*className为container的元素宽度为1100px*/</span>
</span></span><span class="line"><span class="cl"><span class="c">/*此处用于举例，实际这个样式是多余了，默认就是&gt;1100px*/</span>
</span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1100px</span><span class="o">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="p">.</span><span class="nc">container</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="k">width</span><span class="p">:</span> <span class="mi">1100</span><span class="kt">px</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span> 
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="关于css覆写">关于CSS覆写</h2>
<p>我们将根据CSS样式渲染生效原则，在这里简单提一下</p>
<p><strong>浏览器缺省 &lt; 外部样式表 &lt; 外部样式表类选择器 &lt; 外部样式表类派生选择器 &lt; 外部样式表ID选择器 &lt; 外部样式表ID派生选择器 &lt; 内部样式表 &lt; 内部样式表类选择器 &lt; 内部样式表类派生选择器 &lt; 内部样式表ID选择器 &lt; 内部样式表ID派生选择器 &lt; 内联样式</strong></p>
<p>关于这么多种样式生效类型，就不一一介绍了，这属于CSS的基础。</p>
<h2 id="完整css覆写">完整CSS覆写</h2>
<p>定义一个全新的文件，与原来的CSS样式文件互不干扰。 <br>
值得注意的是，自适应的样式表一定要放在原始样式表的下面。 <br>
CSS样式渲染生效还有一个基本原则就是，<strong>后者覆写前者（或者又称为距离元素最近的样式生效）</strong> 。<br>
这种方式与传统方式的差异在于不需要指定大量的@media标签在CSS文件中，与源CSS样式表分开，易读性高。 <br>
在开发的时候就和正常编写CSS样式一致，更为高效。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;zh_CN&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- 原始的样式表 --&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/static/css/index.css&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- 当屏幕宽度低于768px时会加载这个CSS文件 --&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/static/css/mobile.css&#34;</span> <span class="na">media</span><span class="o">=</span><span class="s">&#34;screen and (max-width:768px)&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> 
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="结尾小结">结尾小结</h2>
<p>实际开发中更加推荐使用第二种开发模式：</p>
<ul>
<li>不需要指定大量的@media标签（判断屏幕宽度）</li>
<li>保留的编写CSS样式表的习惯</li>
<li>对于需要适配多种尺寸终端，只需要引用指定的CSS文件</li>
<li>对于旧版网页改造无需破坏原有的样式，直接引入新文件即可</li>
</ul>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2023-01-04</span>
            </div></div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="Share on Twitter" data-sharer="twitter" data-url="https://100180.xyz/posts/2023010401/" data-title="前端多终端自适应网页开发模式" data-hashtags="css"><i class="fab fa-twitter fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Facebook" data-sharer="facebook" data-url="https://100180.xyz/posts/2023010401/" data-hashtag="css"><i class="fab fa-facebook-square fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Linkedin" data-sharer="linkedin" data-url="https://100180.xyz/posts/2023010401/"><i class="fab fa-linkedin fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on 微博" data-sharer="weibo" data-url="https://100180.xyz/posts/2023010401/" data-title="前端多终端自适应网页开发模式"><i class="fab fa-weibo fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on 百度" data-sharer="baidu" data-url="https://100180.xyz/posts/2023010401/" data-title="前端多终端自适应网页开发模式"><i data-svg-src="/lib/simple-icons/icons/baidu.min.svg" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Evernote" data-sharer="evernote" data-url="https://100180.xyz/posts/2023010401/" data-title="前端多终端自适应网页开发模式"><i class="fab fa-evernote fa-fw" aria-hidden="true"></i></a><a href="javascript:void(0);" title="Share on Skype" data-sharer="skype" data-url="https://100180.xyz/posts/2023010401/" data-title="前端多终端自适应网页开发模式"><i class="fab fa-skype fa-fw" aria-hidden="true"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw" aria-hidden="true"></i>&nbsp;<a href="/tags/css/">Css</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/2022083002/" class="prev" rel="prev" title="Git删除历史版本，保留当前状态"><i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>Git删除历史版本，保留当前状态</a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line" itemscope itemtype="http://schema.org/CreativeWork"><i class="far fa-copyright fa-fw" aria-hidden="true"></i><span itemprop="copyrightYear">2017 - 2025</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">MidAug</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span><span class="icp-splitter">&nbsp;|&nbsp;</span><br class="icp-br"/>
                    <span class="icp"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7196301099178927" crossorigin="anonymous"></script> <a target=_blank href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011502019261"><img style="vertical-align: text-bottom; height: 1rem" class="lazyload" data-src="/beian/gongan.png"><span>沪公网安备 31011502019261号</span></a><span class="icp-splitter">&nbsp;|&nbsp;</span><a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2022026688号-1</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw" aria-hidden="true"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw" aria-hidden="true"></i>
            </a>
        </div><script type="text/javascript" src="/lib/autocomplete/autocomplete.min.js"></script><script type="text/javascript" src="/lib/lunr/lunr.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/typeit/index.umd.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":50},"comment":{},"data":{"id-1":"八月半的研发杂谈","id-2":"八月半的研发杂谈"},"search":{"highlightTag":"em","lunrIndexURL":"/index.json","maxResultLength":10,"noResultsFound":"No results found","snippetLength":80,"type":"lunr"},"typeit":{"cursorChar":"|","cursorSpeed":1000,"data":{"id-1":["id-1"],"id-2":["id-2"]},"duration":-1,"speed":30}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
